<template>
	<div id="SickChickenFeedTypeChart"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Column } from '@antv/g2plot'
import chartApi from "@/api/chart/chartApi";

let Data = ref([])

onMounted(() => {
	chartApi.sickChickenFeedData()
		.then(resp =>{
			Data.value = resp;
			draw();
		})
		.catch(resp =>{
			console.log(resp);
		})
})

const draw = () => {
	const columnPlot = new Column('SickChickenFeedTypeChart', {
		data: Data.value, // 使用响应式引用作为数据源
		xField: 'feedType',
		yField: 'quantity',
		label: {
			position: 'middle', // 'top', 'bottom', 'middle',
			style: {
				fill: '#FFFFFF',
				opacity: 0.6
			}
		},
		xAxis: {
			label: {
				autoHide: true,
				autoRotate: false
			}
		},
		meta: {
			type: {
				alias: '饲料类别'
			},
			quantity: {
				alias: '病鸡出现次数'
			}
		}
	})
	columnPlot.render()
}
</script>
